<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>登录页面</title>
</head>
<body>
<div id="app">

    <div class="container">

        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <span> {{ message }} </span>
                <form>
                    <div class="form-group">
                        <label for="nickname">昵称</label>
                        <input type="text" class="form-control" id="nickname" placeholder="请输入昵称" v-model="user.username">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" placeholder="请输入密码" v-model="user.password">
                    </div>

                    <button type="button" class="btn btn-success" @click="login">登录</button>
                    <button type="reset" class="btn btn-danger">重置</button>
                    <button type="button" class="btn btn-info" @click="toRegister">去注册</button>
                </form>
            </div>
        </div>

    </div>

</div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            user:{},
            message:"",
        },
        methods:{
            toRegister(){
                location.href = "register.html";
            },
            login(){
                let _this = this;
                if (_this.user.username==null){
                    alert("用户名不能为空！");
                }
                if (_this.user.password==null){
                    alert("密码不能为空！");
                }
                axios.post("http://localhost:9999/user/login",_this.user).then(function (response) {
                    if (response.data.flag){
                        location.href = "html/provinceList.html";
                    }else{
                        console.log(response.data);
                        _this.message = response.data.message;
                    }
                })
            }
        },
    });
</script>